import React, { useState, useEffect } from "react";
import { PageContainer } from "@ant-design/pro-layout";
import { Card, Steps, Row, Col } from "antd";
import { history } from 'umi';
import style from './index.less';
import { EditOutlined, CloudUploadOutlined, FileImageOutlined, HomeFilled, InboxOutlined } from '@ant-design/icons';
import { getDashboard } from "./service";

const { Step } = Steps;
const Dashboard:React.FC = () => {
  const [info, setInfo] = useState({ userImageNum: 0, publicImageNum: 0});

  useEffect(() => {
    getDashboard().then(res => {
      if (res.code === 0) {
        setInfo(res.data);
      }
    })
  }, []);
  return (
    <PageContainer>
      <div className={style.title}>新手入门</div>
      <div style={{margin: '0 80px 40px'}}>
        <Steps labelPlacement='vertical' current={3}>
          <Step title="选择用户组" icon={<EditOutlined />} />
          <Step title="上传镜像" icon={<CloudUploadOutlined />} />
          <Step title="使用镜像" icon={<FileImageOutlined />} />
        </Steps>
      </div>
      <div className={style.title}>资源总览</div>

      <div style={{ display: 'flex', justifyContent: 'space-around' }}>
        <Card
          style={{ width: '400px' }}
          onClick={() => {
            history.push('/publicHarbor');
          }}
        >
          <Row>
            <Col span='2'><HomeFilled /></Col>
            <Col span='20' style={{ textAlign: 'center'}}>公共镜像</Col>
            <Col span='2'>
              <span style={{color: 'red'}}>{info.publicImageNum}</span>个
            </Col>
          </Row>
        </Card>
        <Card
          style={{ width: '400px' }}
          onClick={() => {
            history.push('/harbor');
          }}
        >
          <Row>
            <Col span='2'><InboxOutlined /></Col>
            <Col span='20' style={{ textAlign: 'center'}}>我的镜像</Col>
            <Col span='2'>
              <span style={{color: 'blue'}}>{info.userImageNum}</span>个
            </Col>
          </Row>
        </Card>
      </div>
    </PageContainer>
  );
};

export default Dashboard;
